@extends('layouts/app')
{{--菜单详情--}}
@section('content')
    <div class="weui-pay append">
        {{--菜名--}}
        <div class="site weui-cells_checkbox">
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name" >菜名:</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="dishes_name" placeholder="请填写菜名">
                </div>
            </div>
        </div>
        {{--价格--}}
        <div class="site weui-cells_checkbox">
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name" >价格:</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" name="price" type="number" pattern="[0-9]*" placeholder="100">
                </div>
                <div class="weui-cell__dd">
                    <label for="name" >元</label>
                </div>
            </div>
        </div>
        {{--选择类型--}}

        <div class="weui-cell site">
            <div class="weui-cell__hd">
                <label for="date" class="weui-label">选择分类:</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="menu_id" type="text" name="menu_id" placeholder="请选分类">
            </div>
        </div>

        {{--推荐热卖特价--}}
        <div class="site weui-cells_checkbox">
            <div class="weui-cell haticum ">
                <div class="weui-cell referrer">
                    <label class=" weui-cell__hd attractive prompt ">
                        <div class="weui-cell__dd">
                            <input type="checkbox" type="number" pattern="[0-9]*" disabled class="weui-check" id="s12">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-cell__hd">
                        <label for="name" >推荐</label>
                    </div>
                </div>
                <div class="weui-cell referrer">
                    <label class=" weui-cell__hd attractive prompt">
                        <div class="weui-cell__dd">
                            <input type="checkbox" type="number" pattern="[0-9]*" disabled class="weui-check" id="s13">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-cell__hd">
                        <label for="name" >热卖</label>
                    </div>
                </div>
                <div class="weui-cell referrer ">
                    <label class=" weui-cell__hd attractive" >
                        <div class="weui-cell__d">
                            <input type="checkbox" type="number" pattern="[0-9]*" class="weui-check discount" id="s14">
                            <i class="weui-icon-checked"></i>
                        </div>
                    </label>
                    <div class="weui-cell__hd">
                        <label for="name" >特价</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="site weui-cells_checkbox zk" style="display: none;">
            <div class="weui-cell ">
                <div class="weui-cell__hd">
                    <label for="name" >折扣:</label>
                </div>
                <div class="weui-cell__hd">
                    <input class="weui-input" type="number" pattern="[0-9]*" name="discount" value="1" placeholder="0.8">
                </div>
            </div>
        </div>
        {{--菜品规格--}}
        <div class="site weui-cells_checkbox spec-box">
            <div class="weui-cell padding">
                <div class="weui-cell__hd">
                    <label for="name" >规格:</label>
                </div>
                <div class="weui-cell__hd">
                    <input class="weui-input" name="spceName" type="text"  placeholder="请输入规格名称">
                </div>
                <div class="weui-cell__ft">
                    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default add-more-panel">添加</a>
                </div>
            </div>
        </div>

        {{--菜品介绍--}}
        <div class="site weui-cells_checkbox">
            <div class="weui-cell ">
                <div class="weui-cell__hd referral">
                    <label for="description"  >介绍:</label>
                </div>

                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" id="description" name="description" placeholder="请填写简介" rows="2"></textarea>
                </div>
            </div>
        </div>
        {{--视频图片表单thumb--}}
        <div class="site weui-cells_checkbox">
            <div class="weui-cells_checkbox ">

                <div class="weui-grids storeH  picture">
                    <h5 class="picture-video f36">图片/视频:</h5>
                    <div class="weui-cell__td get-img rmation">
                        <label for="uploaderInput">
                            <img src="/img/erha1.png" alt="" >
                        </label>
                    </div>
                    <div class="weui-uploader__input-box pull-right" style="display: none;">
                        <form action="" id="img-form">
                            @csrf
                            <input id="uploaderInput" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/uploadImg', '#img-form', showHead)">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {{--提交确认按钮--}}
        <div class="demos-content-padded">
            <a href="javascript:;" class="weui-btn weui-btn_blue open-popup ">确认</a>
        </div>
    </div>

    <script>
        var id  = getRequest().id,
                sid = getRequest().sid;

        var data = [],
                values = [];


        function getFoodDetail () {
            $.post("/api/shop_dish/one", {shop_id: sid, id: id }, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }

                console.log("res", res);

                // 显示内容
                $("input[name='dishes_name']").val(res.data.dishes_name);
                $("input[name='price']").val(res.data.price);


                // 获取分类
                getFoodType(function (r) {
                    var menuName = "";

                    for (var i = 0, len = r.length; i < len; i++) {
                        if (res.data.menu_id == r[i].id) {
                            menuName = r[i].menu_name
                        }
                    }
                    console.log("menuName", menuName);
                    $("input[name='menu_id']").val(menuName);
                    $("input[name='menu_id']").attr("data-values", res.data.menu_id);
                });

                // 特价
                if (res.data.discount < 1) {
                    $(".discount").prop("checked", true);
                    $(".zk").show();
                    $("input[name='discount']").val(res.data.discount);
                }

                // 介绍
                $("#description").val(res.data.description);

                // 显示多规格
                if (res.data.attribute && res.data.attribute.length > 0) {
                    createMorePanel(res.data.attribute)
                }

                // 显示图片
                showFoodImg(res.data.thumb);
            });
        }
        getFoodDetail();


        // 获取菜品分类列表
        function getFoodType (cb) {
            $.post("/api/shop_menu/all", {shop_id: sid}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                // 格式化菜品分类，好显示
                var data = getMyTypeData(res.data);

                // 点击选择菜品分类
                $("#menu_id").select({
                    title: "请选择菜品分类",
                    items: data
                });
                typeof cb === 'function' &&  cb(res.data);
            });
        }

        // 显示菜的图片
        function showFoodImg (str) {
            var arr = str.split(";"),
                    obj = {};
            console.log("arr", arr);
            for (var i = 0, len = arr.length; i < len; i++) {
                obj['data'] = arr[i];
                if (obj['data']) {
                    showHead(obj, i);
                }

            }
        }


        $(".prompt").click(function(){
            return $.toast("暂未开放!", "text");
        });

        // 点击编辑菜品
        $(".open-popup").click(function(){
            var data={};
            data['shop_id'] = sid;
            data['id'] = id;



            //菜名
            data['dishes_name'] =$("input[name='dishes_name']").val();
            data['price'] =$("input[name='price']").val();
            data['menu_id'] =$("input[name='menu_id']").attr("data-values");
            data['description'] =$("textarea[name='description']").val();


            //打折         description
            data['discount'] =$("input[name='discount']").val();
            //多张图片获取拆分
            data ['thumb']= "";
            //$('.face-img img').attr("src");
            var len = $(".face-img img").length;
            $(".face-img img").each(function (index, value) {
                console.log("index", index);
                var url = $(this).attr("src");
                if (index < len -1) {
                    //多张图片分隔
                    data['thumb'] += url + ';';
                } else {
                    data['thumb'] += url;
                }
            });

            // 多规格

            data['spec_arr'] = getSpceData();

            if (data['spec_arr'].length > 0) {
                data['is_attr'] = 1;
            } else {
                data['is_attr'] = 0;
            }
            if (!data['dishes_name']) {
                return $.toast("菜名不能为空", "text");
            } else if (!data['price']) {
                return $.toast("价格不能为空", "text");
            } else if (!data['menu_id']) {
                return $.toast("分类不能为空", "text");
            }


            console.log("data", data);
            $.post("/api/shop_dish/edit",data,function(res){
                console.log("res",res);
                if(typeof res === 'string'){
                    res =JSON.parse(res);
                }
                $.alert (res.info, function () {
                    if(res.code ===200){
                        history.go(-1);
                    }
                });
            });

        });


        // 格式化菜品分类
        function getMyTypeData (data) {
            var ldata =[];
            for (var i = 0, len = data.length; i < len; i++) {
                ldata.push({
                    title: data[i].menu_name,
                    value: data[i].id
                });
            }

            return ldata;
        }



        //折扣输入框
        $("#s14").change(function () {
            var fool = $(this).prop("checked");

            console.log("fool", fool);
            if (fool) {
                $(".zk").show();
            } else {
                $(".zk").hide();
            }
        });

        // 显示上传的图片
        function showHead(img, i) {
            if (!i) {
               i =  Math.floor(Math.random() * 999)+ 100;
            }
            var htmlText = [];
            htmlText.push('<div class="weui-cell__td video">');
            htmlText.push('<label class="face-img" for="change-img'+ i +'">');

            htmlText.push('<img src=' + img.data + ' class="myimg" id="'+ i + '"/>');
            htmlText.push('<div class="weui-uploader__input-box pull-right" style="display: none;">');
            htmlText.push('<form action="">');
            htmlText.push('<input id="change-img'+ i +'" name="thumb" data-id="'+ i + '" class="weui-uploader__input change-input" type="file" accept="image/*" multiple="" onchange="uploadImg(this)">');
            htmlText.push('</form>');
            htmlText.push(' </div>');
            htmlText.push('</label>');
            htmlText.push('</div>');

            console.log("htmlText", htmlText);
            $(".get-img").before(htmlText.join(''));

        }
//        // 显示改变上传图片
        function changeImg(img, element) {
            // console.log("element", element);
            // console.log("img", img);
            if(img.code==200){
                element.attr("src", img.data);
            }else{
                $.toast(img.info, 'text');
            }

        }
//
//        // 图片修改
//        $(".picture").on("click", ".face-img", function () {
//            var _that = $(this).children("img");
//            console.log("666");
//            $("#change-img").click();
//
//            $("#change-img").change(function () {
//                saveImg('/uploadImg', '#change-img-form', changeImg, _that)
//            });
//        });

        function uploadImg (e) {
            var ele = $(e).attr("data-id"),
                form = $(e).parent("form");
            console.log("ele", ele);
            saveImg('/uploadImg', form, changeImg, $('#' + ele));
        }


        // 点击已经生成的规格
        $(".more-spec").on("click", ".more-text", function () {
            var has = $(this).hasClass("active");
            if (has) {
                $(this).removeClass("active");
            } else {
                $(this).addClass("active");
            }
        });

        // 点击添加一个面板
        $(".add-more-panel").click(function () {
            var htmlText = [],
                    spceName = $("input[name='spceName']").val();

            console.log("spceName", spceName);
            if (!spceName) {
                return $.toast("规格名称不能为空", "text");
            }


            htmlText.push('<div class="spec-panel padding">');
            htmlText.push('<div class="spec-title f30 gary6" data-id="-1">');
            htmlText.push(spceName);
            htmlText.push('</div>');
            htmlText.push('<div class="spec-list row">');
            htmlText.push('<div class="col-5">');
            htmlText.push('<input type="text" class="arrt-name f28 gary3" placeholder="属性">');
            htmlText.push('</div>');
            htmlText.push('<div class="col-5">');
            htmlText.push('<input  class="price f28 gary3" type="number" pattern="[0-9]*" placeholder="价格">');
            htmlText.push('</div>');
            htmlText.push('<div class="col-2 text-center">');
            htmlText.push('<p class="change-btn add">+</p>');
            htmlText.push('</div>');
            htmlText.push('</div>');
            htmlText.push('<div class="close">&times;</div>');
            htmlText.push('</div>');


            $(".spec-box").append(htmlText.join(''));
            $("input[name='spceName']").val('');

        });

        // 删除一个面板
        $(".spec-box").on("click", ".close", function () {
            $(this).parent(".spec-panel").remove();
        });

        // 添加一个小框
        $(".spec-box").on("click", ".change-btn.add", function () {
            var htmlText = [];

            htmlText.push('<div class="spec-list row">');
            htmlText.push('<div class="col-5">');
            htmlText.push('<input type="text" class="arrt-name f28 gary3" placeholder="属性">');
            htmlText.push('</div>');
            htmlText.push('<div class="col-5">');
            htmlText.push('<input type="number" pattern="[0-9]*" class="price f28 gary3" placeholder="价格">');
            htmlText.push('</div>');
            htmlText.push('<div class="col-2 text-center">');
            htmlText.push('<p class="change-btn add">+</p>');
            htmlText.push('</div>');
            htmlText.push('</div>');

            $(this).parents(".spec-list").after(htmlText.join(''));
            $(this).parents(".spec-list").find(".col-2").html('<p class="change-btn del">&times;</p>')

        });

        // 删除一个小框
        $(".spec-box").on("click", ".change-btn.del", function () {
            $(this).parents(".spec-list").remove();
        });

        // 获取多规格数据
        function getSpceData () {

            var spec_arr = [],
                    spec = [];


            $(".spec-panel").each(function (index, value) {
                var title = $(value).find(".spec-title").text();
                var id = $(value).find(".spec-title").attr("data-id");
                console.log("index", index);
                var str = "";
                var len = $(value).find(".spec-list").length;
                $(value).find(".spec-list").each(function (i, v) {
                    console.log("i", i);
                    var arrtName = $(v).find(".arrt-name").val(),
                            price = $(v).find(".price").val();
                    if (!price) {
                        price = 0;
                    }
                    if (i < len - 1) {
                        str += arrtName + "|" + price + ',';
                    } else {
                        str += arrtName + "|" + price
                    }

                });
                spec_arr.push({attr_id: id,attribute: title, spec: str});
            });
            console.log("spec_arr", spec_arr);

            return spec_arr;

        }

        // 创建多规格
        function createMorePanel (data) {
            console.log("data", data);
            var len = data.length,
                    htmlText = [];
            console.log("len", len);
            for (var i = 0; i < len; i++) {

                htmlText.push('<div class="spec-panel padding">');
                htmlText.push('<div class="spec-title f30 gary6" data-id='+ data[i].attr_id +'>');
                htmlText.push(data[i].attribute);
                htmlText.push('</div>');
                var spec = data[i].spec;
                if (spec && spec.length > 0　) {
                    for (var j = 0; j < spec.length; j++) {
                        htmlText.push('<div class="spec-list row">');
                        htmlText.push('<div class="col-5">');
                        htmlText.push('<input type="text" value="'+ data[i].spec[j]. spec_name +'" class="arrt-name f28 gary3" placeholder="属性">');
                        htmlText.push('</div>');
                        htmlText.push('<div class="col-5">');
                        htmlText.push('<input  type="number" pattern="[0-9]*"  value="'+ data[i].spec[j]. spec_price +'" class="price f28 gary3" placeholder="价格" >');
                        htmlText.push('</div>');
                        htmlText.push('<div class="col-2 text-center">');
                        if (j < spec.length - 1) {
                            htmlText.push('<p class="change-btn del">&times;</p>');
                        } else {
                            htmlText.push('<p class="change-btn add">+</p>');
                        }
                        htmlText.push('</div>');
                        htmlText.push('</div>');
                    }
                }
                htmlText.push('<div class="close">&times;</div>');
                htmlText.push('</div>');
            }
            $(".spec-box").append(htmlText.join(''));
        }
    </script>
@endsection
@extends('layouts/footer')
